<div class="m-l nav navbar-nav m-t block" style="width:300px;">
	<span>用户管理 ></span>
	<span>Admin用户 ></span>
	<span>列表</span>
</div>
<div class="m-t-lg">
	<div class="wrapper-sm">
		<div class="panel panel-default">
			<div class="panel-body">
				<div style="border-color: #e5e5e5;padding: 10px;background-color: #e5e5e5">
					<div class="row">
						<div class="col-md-6">
							<div class="input-group">
								<input type="text" class="form-control" placeholder="手机号...">
								<span class="input-group-btn">
					        <button class="btn btn-default" type="button">查询</button>
					      </span>
							</div>
						</div>
						<div class="col-md-6" style="text-align: right">
							<button class="btn btn-info pull-right" (click)="btype=1; myModal.show()">
							新增
						</button>
						</div>
					</div>
				</div>
				<div class="table-responsive">
					<table class="table table-hover table-striped">
						<thead>
							<tr>
								<th>用户ID</th>
								<th>姓名</th>
								<th>手机号</th>
								<th>工号</th>
								<th>权限</th>
								<th>身份证号</th>
								<th>单位名称</th>
								<th>注册日期</th>
								<th>操作</th>

							</tr>
						</thead>
						<tbody>
							<tr>
								<td>5435345</td>
								<td>sssdssf</td>
								<td>12324355678</td>
								<td>123ferwer</td>
								<td>客服管理员</td>
								<td>
									324234234236456
								</td>
								<td>上海幸云</td>
								<td>2017/6/17</td>
								<td>
									<button class="btn btn-xs btn-info" (click)="btype=2;myModal.show()">编辑</button>
									<button class="btn btn-xs btn-success" [routerLink]="['maintenancerecord','23123'+',3']">维保记录</button>
									<button class="btn btn-xs btn-danger" (click)="btype=3;myModal.show()">禁用</button>
									<button class="btn btn-xs btn-danger" (click)="btype=4;myModal.show()">删除</button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<app-pagination [pageModel]="pageModel" (pageChanged)="getAll($event)"></app-pagination>
			</div>
		</div>
	</div>
</div>

<div>
	<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 800px">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" *ngIf="btype==1">新增管理员用户</h4>
					<h4 class="modal-title" *ngIf="btype==2">编辑管理员用户</h4>
					<h4 class="modal-title" *ngIf="btype==3">分配权限</h4>
					<h4 class="modal-title" *ngIf="btype==4">禁用</h4>
					<h4 class="modal-title" *ngIf="btype==5">删除管理员用户</h4>
					<!--  <button class="close" aria-label="Close" (click)="closeModal()">
		      <span aria-hidden="true">&times;</span>
		    </button> -->
				</div>
				<div class="modal-body">
					<form class="form-horizontal" *ngIf="btype==1||btype==2">
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">账号</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="账号" name="username" [(ngModel)]='username' required="">
							</div>
							<div class="col-sm-2" style="color:red;margin-top: 10px;">
								<p [hidden]="name">必填</p>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">密码</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="密码" name="password" [(ngModel)]='password' required="">
							</div>
							<div class="col-sm-2" style="color:red;margin-top: 10px;">
								<p [hidden]="password">必填</p>
								<p [hidden]="password==confirmPassword">密码不同</p>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">确认密码</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="确认密码" name="confirmPassword" [(ngModel)]='confirmPassword' required="">
							</div>
							<div class="col-sm-2" style="color:red;margin-top: 10px;">
								<p [hidden]="confirmPassword">必填</p>
								<p [hidden]="confirmPassword&&password==confirmPassword">密码不同</p>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">姓名</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="姓名" name="name" [(ngModel)]='name' required="">
							</div>
							<div class="col-sm-2" style="color:red;margin-top: 10px;">
								<p [hidden]="name">必填</p>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">手机号</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="手机号" name="phone" [(ngModel)]='phone' required="">
							</div>
							<div class="col-sm-2" style="color:red;margin-top: 10px;">
								<p [hidden]="phone">必填</p>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">工号</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="工号" name="jobNum" [(ngModel)]='jobNum' required="">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">身份证号</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="手机号" name="IDnum" [(ngModel)]='IDnum' required="">
							</div>
							<div class="col-sm-2" style="color:red;margin-top: 10px;">
								<p [hidden]="IDnum">必填</p>
							</div>
						</div>

					</form>

					<div *ngIf="btype==4">
						<div style="background-color: #e5e5e5;padding: 10px;border-radius: 5px;">
							<h4>确定要禁用嘛？</h4>
						</div>
					</div>
					<div *ngIf="btype==5">
						<div style="background-color: #e5e5e5;padding: 10px;border-radius: 5px;">
							<h4>确定要删除该用户嘛？</h4>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-info confirm-btn" (click)="open()" [disabled]="!name||!phone||!IDnum" *ngIf="btype==1">保存</button>
					<button class="btn btn-info confirm-btn" (click)="open()" [disabled]="!name||!phone||!IDnum" *ngIf="btype==2">保存</button>

					<button class="btn btn-danger confirm-btn" (click)="open()" *ngIf="btype==3">确定</button>
					<button class="btn btn-danger confirm-btn" (click)="open()" *ngIf="btype==4">确定</button>
					<button class="btn  confirm-btn " (click)="myModal.hide();cancel()">取消</button>
				</div>
			</div>

		</div>
	</div>
</div>